<template>
    <div class="warp">
        <div class="header">
            <h1>前端开发-李翱翔</h1>
            <h4>计算机科学与技术|本科|13277291910|m13277291910@163.com</h4>
        </div>
        <div class="content">
            <div class="left">
                <ul class="list">
                    <li>主要技术栈</li>
                    <li>HTML5</li>
                    <li>CSS3</li>
                    <li>JavaScript</li>
                    <li>Vue2、3相关生态</li>
                    <li>uniapp、uniCloud</li>
                </ul>
            </div>
            <div class="container">
                <img src="../../assets/macos-rancho-cucamonga-5120x2880-apple-os-x-rancho-cucamonga-abstract-24732.jpg" alt="">
            </div>
            <div class="right">
                <div class="info">
                    <h2>兴趣</h2>
                    <p>喜欢写代码，喜欢折腾</p>
                </div>
                <div class="info">
                    <h2>兴趣</h2>
                    <p>喜欢写代码，喜欢折腾</p>
                </div>
                <div class="info">
                    <h2>兴趣</h2>
                    <p>喜欢写代码，喜欢折腾</p>
                </div>
                <div class="info">
                    <h2>兴趣</h2>
                    <p>喜欢写代码，喜欢折腾</p>
                </div>
            </div>
        </div>
        <div class="footer">2024年9月9日</div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.warp{text-align: center;}
.warp .header{height: auto;background-color: rgb(223, 223, 223);overflow: hidden;}
.warp .content{display: grid;grid-template-columns: 20% 60% 20%;}
.warp .content .left .list{background-color: rgb(238, 238, 238);text-align: left;list-style: none;}
.warp .content .left .list li{padding: 10px;border-bottom: 1px solid #fff;cursor: pointer;}
.warp .content .container img{width: 100%;}
.warp .content .right .info{text-align: left;padding: 10px;background-color: rgb(163, 194, 197);}
.warp .footer{height: auto;background-color: rgb(219, 219, 219);}

@media screen and (max-width: 768px){
    .warp .content{display: block;}
    .warp .content .left,.warp .content .right{width: 100%;}
}
</style>